<template>
    <section>
        <!--待处理寻主信息列表-->
        <el-table :data="messages" v-loading="listLoading"   style="width: 100%;">
            <!--复选框-->
            <el-table-column prop="name" label="宠物">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column prop="age" label="年龄">
            </el-table-column>
            <el-table-column prop="gender" label="性别">
            </el-table-column>
            <el-table-column prop="coatColor" label="毛色">
            </el-table-column>
            <el-table-column prop="type.name" label="宠物类型">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column prop="title" label="标题">
            </el-table-column>
            <el-table-column prop="user.username" label="发布人">
            </el-table-column>
            <el-table-column label="操作" >
                <template scope="scope">
                    <el-button size="small" @click="handle(scope.$index, scope.row)">处理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>


        <!--处理弹出窗体-->

        <el-dialog :title="title"  :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" :rules="rules" ref="ruleForm"  label-width="80px" >
                <el-form-item label="标题">
                    <el-input v-model="addForm.title" :disabled="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="addForm.gender" :disabled="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="毛色">
                    <el-input v-model="addForm.coatColor" :disabled="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="addForm.typeName" :disabled="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="addForm.address" :disabled="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="发布人">
                    <el-input v-model="addForm.username" :disabled="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="成本价格">
                    <el-input v-model="addForm.price" :disabled="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="宠物名">
                    <el-input v-model="addForm.name"    auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="addForm.age"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="销售价格">
                    <el-input v-model="addForm.saleprice" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                </el-form-item>
                <el-form-item label="付款方式">
                    <el-select v-model="addForm.paytype" >
                        <el-option label="垫付" value="1"></el-option>
                        <el-option label="银行卡转账" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="宠物简介">
                    <quill-editor v-model="addForm.intro"  :options="editorOption">
                    </quill-editor>
                </el-form-item>
                <el-form-item label="领养须知">
                    <quill-editor v-model="addForm.adoptNotice"  :options="editorOption">
                    </quill-editor>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit" >提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import quillConfig from "../../common/quill-config"
    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                editorOption: quillConfig,
                rules: {
                    name: [
                        {required: true, message: '待处理寻主信息名必填', trigger: 'blur'}
                    ]
                },
                fileList:[],//附件回显数据
                //高级查询form表单
                searchForm: {
                    //待处理寻主信息
                    state: 0
                },
                //待处理寻主信息分页列表
                messages:[],
                //加载列表框
                listLoading:false,
                //当前页
                currentPage:1,
                //每页条数
                pageSize:10,
                //总条数
                total: 0,
                //封装复选框选中的行数据
                sels:[],
                //弹出框标题
                title: "",
                //是否弹出窗体，默认不弹出
                addFormVisible: false,
                //弹出框中form表单对应的data数据
                addForm: {
                    id:"",
                    //标题
                    title:"",
                    //宠物名
                    name: "",
                    //性别
                    gender:"",
                    //年龄
                    age:"",
                    //毛色
                    coatColor:"",
                    //定义一个资源来装图片路径
                    resources:"",
                    //地址
                    address:"",
                    //类型名
                    typeName:"",
                    //类型id
                    typeId:"",
                    //发布人
                    username:"",
                    //价格
                    price:"",
                    //销售价格
                    saleprice:"",
                    //支付方式
                    paytype:1,
                    //宠物简介
                    intro:"",
                    //领养须知
                    adoptNotice:""

                }
            };
        },
        methods: {
            //编辑按钮触发事件
            handle(index,row){
                this.title = "处理寻主信息";
                //能解决大部分的属性
                for(var k in this.addForm){
                    this.addForm[k] = row[k];
                }
                //对于特定属性进行手动回显
                this.addForm.gender = (this.addForm.gender ? "公" : "母");
                //如果宠物类型有值
                if(row.type){
                    //宠物类型名(方便回显)
                    this.addForm.typeName = row.type.name;
                    //宠物类型id(提交的时候，要把类型提交到后台)
                    this.addForm.typeId = row.type.id;
                }
                //如果发布人有值
                if(row.user){
                    this.addForm.username = row.user.username;
                }
                //回显支付方式
                this.addForm.paytype = "1";

                //弹出窗体
                this.addFormVisible = true;
            },
            //页码发生改变的时候触发此函数
            handleCurrentChange(val){
                //修改当前页
                this.currentPage = val;
                //再来分页查询
                this.loadMessages();
            },
            //加载待处理寻主信息分页列表
            loadMessages(){
                //显示加载框
                this.listLoading = true;
                //前端传递的分页参数(当前页，每页条数)
                let param = {
                    "currentPage": this.currentPage, "pageSize": this.pageSize,
                    "state":this.searchForm.state
                };
                //请求url地址，并且传递参数
                this.$http.patch("/searchMasterMsg",param).then(res=>{
                    //关闭加载框
                    this.listLoading = false;
                    let {total,list} = res.data;
                    //返回分页列表
                    this.messages = list;
                    //返回总条数
                    this.total = total;
                })
            },
            addSubmit(){
                //添加额外属性(与后台进行匹配)   成本价
                this.addForm.costprice = this.addForm.price;
                //添加宠物类型对象
                let type = {"id": this.addForm.typeId};
                //添加type属性
                this.addForm.type = type;
                //封装寻主信息对象
                let searchMasterMsg = {"id": this.addForm.id};
                //添加searchMasterMsg属性
                this.addForm.searchMasterMsg = searchMasterMsg;
                //创建详情对象
                let detail = {"intro": this.addForm.intro, "adoptNotice": this.addForm.adoptNotice};
                //添加detail属性
                this.addForm.detail = detail;
                console.debug(this.addForm);
                this.$http.post("/pet", this.addForm).then(res => {
                    let {success, msg} = res.data;
                    if(success){
                        //关闭模态框
                        this.addFormVisible = false;
                        //刷新界面
                        this.loadMessages();
                    }
                });

            }

        },
        mounted() {
            this.loadMessages();
        }
    }

</script>